<!--
**********************************************************
* @Author: 张小平
* @Date:   2024-05-01
* @Email:  qqshuqian@163.com
* @Last modified: 最后修改日期
* @Description: 文件描述
**********************************************************
-->
<template>
  <div class="table">
    <div class="head">
      <div class="first">表单字段</div>
      <div><el-radio v-model="operating" :label="TYPE.T1" @change="handleAll">可编辑</el-radio></div>
      <div><el-radio v-model="operating" :label="TYPE.T2" @change="handleAll">只读</el-radio></div>
      <div class="last">
        <el-radio v-model="operating" :label="TYPE.T3" @change="handleAll">隐藏</el-radio>
      </div>
    </div>
    <div class="row" v-for="item in datas" :key="item.id">
      <div class="first">{{ item.fieldName }}</div>
      <div>
        <el-radio v-model="item.operating" :label="TYPE.T1" @change="handleOne"
          ><span class="font1">可编辑</span></el-radio
        >
      </div>
      <div>
        <el-radio v-model="item.operating" :label="TYPE.T2" @change="handleOne"
          ><span class="font1">只读</span></el-radio
        >
      </div>
      <div class="last">
        <el-radio v-model="item.operating" :label="TYPE.T3" @change="handleOne"
          ><span class="font1">隐藏</span></el-radio
        >
      </div>
    </div>
  </div>
</template>

<script>
import _ from 'lodash'
const TYPE = {
  T1: 'writable',
  T2: 'readable',
  T3: 'hide'
}
export default {
  props: {
    datas: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      operating: '',
      maxLen: 0,
      isAll: 1,
      TYPE
    }
  },
  watch: {
    operating(val) {
      setTimeout(() => {
        if (this.datas.length && this.isAll) {
          this.datas.map((item) => {
            item.operating = val
          })
        }
      }, 100)
    },
    datas: {
      handler(val) {
        if (this.maxLen) {
          const len1 = this.countBy(TYPE.T1)
          const len2 = this.countBy(TYPE.T2)
          const len3 = this.countBy(TYPE.T3)
          this.setOptions(this.maxLen, {
            len1,
            len2,
            len3
          })
        }
        this.$emit('on-list', val)
      },
      deep: true
    }
  },
  methods: {
    handleItem(val) {
      console.log(val, this.datas)
    },
    countBy(operating) {
      return _.filter(this.datas, { operating }).length
    },
    handleAll() {
      this.isAll = 1
    },
    handleOne() {
      this.isAll = 0
    },
    setOptions(maxLen, { len1, len2, len3 }) {
      if (maxLen) {
        switch (maxLen) {
          case len1:
            this.operating = TYPE.T1
            break
          case len2:
            this.operating = TYPE.T2
            break
          case len3:
            this.operating = TYPE.T3
            break
          default:
            this.operating = ''
        }
      }
    }
  },
  mounted() {
    this.maxLen = this.datas.length
    const len1 = this.countBy(TYPE.T1)
    const len2 = this.countBy(TYPE.T2)
    const len3 = this.countBy(TYPE.T3)
    this.setOptions(this.maxLen, {
      len1,
      len2,
      len3
    })
  }
}
</script>

<style lang="scss" scoped>
@import './form.scss';
.table {
  padding: 20px;
}
</style>
